<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram Recreation</title>
</head>
<body>

<canvas id="myCanvas" width="450" height="450" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Parameters
    const cx = 225; // Center x of the canvas
    const cy = 200; // Center y, with space for labels and caption
    const R = 90;
    const lineWidth = 2.5;
    const arrowSize = 8;
    const fontSize = '20px';
    const mainFont = fontSize + ' Arial';
    const italicFont = 'italic ' + fontSize + ' Arial';

    // Style
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = mainFont;
    ctx.textBaseline = 'middle';

    // Function to draw an arrow on an axis line
    function drawArrow(ctx, x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        
        const headlen = arrowSize;
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // Draw Axes
    // Y-axis
    drawArrow(ctx, cx, cy + R + 40, cx, cy - R - 40);
    // X-axis
    drawArrow(ctx, cx - R - 40, cy, cx + R + 70, cy);
    
    // Axes Labels
    ctx.textAlign = 'center';
    ctx.font = italicFont;
    ctx.fillText('y', cx + 15, cy - R - 45);
    ctx.fillText('x', cx + R + 80, cy);
    ctx.font = mainFont;

    // Draw Disk
    ctx.beginPath();
    ctx.arc(cx, cy, R, 0, 2 * Math.PI);
    ctx.stroke();

    // Draw Point Labels A and B
    ctx.textAlign = 'center';
    ctx.fillText('A', cx, cy + R + 20); // Label for point (0, -R)
    ctx.textAlign = 'left';
    ctx.fillText('B', cx - 25, cy - R); // Label for point (0, R)
    
    // Draw Radius R label in the second quadrant
    ctx.beginPath();
    // In canvas, y increases down. 2nd math quadrant (top-left) needs angle between PI and 3PI/2.
    const angleR = 5 * Math.PI / 4; // 225 degrees
    const r_line_end_x = cx + R * Math.cos(angleR);
    const r_line_end_y = cy + R * Math.sin(angleR);
    ctx.moveTo(cx, cy);
    ctx.lineTo(r_line_end_x, r_line_end_y);
    ctx.stroke();
    ctx.font = italicFont;
    ctx.textAlign = 'right';
    ctx.fillText('R', r_line_end_x, r_line_end_y - 15);
    ctx.font = mainFont;
    ctx.textAlign = 'center'; // Reset

    // Draw dashed line along x-axis to the mass
    ctx.beginPath();
    ctx.setLineDash([5, 3]);
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + R, cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line

    // Draw Point Mass
    ctx.beginPath();
    const massRadius = 6;
    ctx.arc(cx + R, cy, massRadius, 0, 2 * Math.PI);
    ctx.fill();

    // Draw mass label "m = 5/4 M"
    ctx.font = italicFont;
    ctx.textAlign = 'left';
    const labelText = "m = 5/4 M";
    const label_x = cx + R + 15;
    const label_y = cy - 25;
    ctx.fillText(labelText, label_x, label_y);

    // Draw pointer from label to mass
    ctx.beginPath();
    const pointer_start_x = label_x + ctx.measureText("m").width / 2;
    const pointer_start_y = label_y + 10;
    const pointer_end_x = cx + R + massRadius;
    const pointer_end_y = cy;
    ctx.moveTo(pointer_start_x, pointer_start_y);
    ctx.quadraticCurveTo(pointer_start_x + 10, pointer_start_y, pointer_end_x, pointer_end_y);
    ctx.stroke();

    // Draw Caption
    ctx.font = 'bold ' + (parseInt(fontSize)-4) + 'px Arial';
    ctx.fillText('Fig. 1.109.', cx, canvas.height - 30);

</script>

</body>
</html>